<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" @submit.prevent>
            <el-form-item label="设备号" prop="sn">
                <el-input v-model="queryParams.sn" placeholder="请输入设备号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="20" v-if="info.devId || info.sn">
            <el-col :span="24">
                <el-card>
                    <template #header>
                        <span>设备详情</span>
                    </template>
                    <el-row class="info_cont">
                        <el-col :lg="4" :sm="6" :xs="24">
                            <label>设备名称：</label>
                            <span>{{ info.devName }}</span>
                        </el-col>
                        <el-col :lg="4" :sm="6" :xs="24">
                            <label>设备号：</label>
                            <span>{{ info.sn }}</span>
                        </el-col>
                        <el-col :lg="4" :sm="6" :xs="24">
                            <label>信号值：</label>
                            <span>{{ info.signalVal || 0 }}</span>
                        </el-col>
                        <el-col :lg="4" :sm="6" :xs="24" class="flex_cont">
                            <label>设备版本：</label>
                            <dict-tag :options="dev_version" :value="info.version" />
                        </el-col>
                        <el-col :lg="4" :sm="6" :xs="24" class="flex_cont">
                            <label>设备状态：</label>
                            <dict-tag :options="dev_status" :value="info.devStatus" />
                        </el-col>
                        <el-col :lg="4" :sm="6" :xs="24" v-if="info.voltage != undefined">
                            <label>电压：</label>
                            <span>{{ info.voltage }}V</span>
                        </el-col>
                        <el-col :lg="4" :sm="6" :xs="24" v-if="info.temperature != undefined">
                            <label>实时温度：</label>
                            <span>{{ info.temperature }}℃</span>
                        </el-col>
                        <el-col :lg="4" :sm="6" :xs="24" v-if="info.leakElec != undefined">
                            <label>漏电值：</label>
                            <span>{{ info.leakElec }}mA</span>
                        </el-col>
                        <el-col :lg="4" :sm="6" :xs="24" v-if="leak_now != null">
                            <label>实时漏电：</label>
                            <span>{{ leak_now || "-" }}mA</span>
                        </el-col>
                        <el-col :lg="4" :sm="6" :xs="24" v-if="imei != null">
                            <label>imei号：</label>
                            <span>{{ imei || "-" }}</span>
                        </el-col>
                        <el-col :sm="12" :xs="24">
                            <label>硬件版本：</label>
                            <span>{{ version || "-" }}</span>
                        </el-col>
                    </el-row>
                    <div class="btn_group">
                        <el-button type="success" @click="handleDebug(info.sn)" v-hasPermi="['operation:openOrShut']"
                            v-if="info.version != '002'">
                            <span>一键开关</span>
                        </el-button>
                        <el-button type="success" @click="handleRoadState(info.sn)">
                            <span>刷新通道状态</span>
                        </el-button>
                        <el-button @click="cardSet(info)">
                            <span>刷卡设置</span>
                        </el-button>
                        <el-button type="primary" @click="handleRoadVer(info.sn)">
                            <span>获取版本</span>
                        </el-button>
                        <el-button @click="handleRoadTemp(info.sn)">
                            <span>查询温度</span>
                        </el-button>
                        <el-button type="warning" @click="handleRoadRestart(info.sn)" v-hasPermi="['operation:restart']">
                            <span>重启设备</span>
                        </el-button>
                    </div>
                    <div class="btn_group">
                        <el-button type="primary" @click="handlePower(info.sn)" v-if="info.version != '002'">
                            <span>获取功率</span>
                        </el-button>
                        <el-button type="primary" @click="handleImei(info.sn)" v-hasPermi="['operation:imei']">
                            <span>获取imei</span>
                        </el-button>
                        <el-button type="warning" @click="handleStandardPower(info.sn)" v-if="info.version != '002'"
                            v-hasPermi="['operation:standardPower']">
                            <span>校准标定</span>
                        </el-button>
                        <el-button type="primary" @click="handleLeakElecNow(info.sn)" v-hasPermi="['operation:leakElec']"
                            v-if="info.version != '002'">
                            <span>查询实时漏电</span>
                        </el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" v-if="info.devId || info.sn">
            <el-col :span="5" class="mt10" v-for="item in road_list" :key="item.road">
                <el-card v-if="item.state != 3">
                    <template #header>
                        <span>第{{ item.road }}路</span>
                    </template>
                    <el-row class="info_cont">
                        <el-col>
                            <el-row :gutter="20">
                                <el-col :md="8">
                                    <div v-if="item.state == 0" class="road_state online"></div>
                                    <div v-if="item.state == 1" class="road_state used"></div>
                                    <div v-if="item.state != 0 && item.state != 1" class="road_state error"></div>
                                </el-col>
                                <el-col :md="16">
                                    <span class="block">
                                        实时功率：{{ item && item.pow != null ? item.pow + "瓦" : "-" }}
                                    </span>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <div class="btn_group">
                        <el-button type="primary" @click="openRoad(info.sn, item.road)">
                            <span>打开线路</span>
                        </el-button>
                        <el-button type="danger" @click="closeRoad(info.sn, item.road)">
                            <span>关闭线路</span>
                        </el-button>
                        <el-button type="primary" @click="handleRoadPow(info.sn, item.road)">
                            <span>查询功率</span>
                        </el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <DialogCard ref="dialogCardRef" />
    </div>
</template>

<script setup name="Control">
import { getPow, getPower, getRoadState, getTemp, getVer, restart, roadOpen, roadClose, getImei, getLeakElec, setLeakElec, getLeakElecNow, standardPower, debugOpen } from "@/api/equipment/control";
import { getDev, getDevSn, getDevbyQr } from "@/api/equipment/dev";
import { ElLoading, ElMessageBox } from 'element-plus'
import DialogCard from "@/dialog/dev/DialogCard";

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const { dev_status, dev_version } = proxy.useDict("dev_status", "dev_version");

const showSearch = ref(true)
const queryParams = ref({
    sn: null,
    devId: null,
})
const info = ref({})
const road_list = ref([])
const version = ref(null)
const leak_now = ref(null)
const imei = ref(null)

// 查询设备列表(根据设备ID)
function getDevInfo() {
    road_list.value = [];
    if (queryParams.value.devId == null) {
        return;
    }
    getDev(queryParams.value.devId).then((response) => {
        if (response.code == 0) {
            if (response.data == null) {
                proxy.$modal.notifyError("查无设备");
            } else {
                info.value = response.data;
                if (response.data.roadStatus != null) {
                    road_list.value = formatRoad(
                        JSON.parse(response.data.roadStatus)
                    );
                }
                queryParams.value.sn = info.value.sn;
            }
        }
    });
}
// 查询设备列表(根据设备号)
function getInfoBySn() {
    road_list.value = [];
    if (queryParams.value.sn == "") {
        queryParams.value.sn = null;
        return;
    }
    if (queryParams.value.sn == null) {
        proxy.$modal.notifyError("请输入正确的设备号");
        return;
    }
    getDevSn(queryParams.value.sn).then((response) => {
        if (response.code == 0) {
            if (response.data == null) {
                proxy.$modal.notifyError("查无设备");
            } else {
                info.value = response.data;
                if (response.data.roadStatus != null) {
                    road_list.value = formatRoad(
                        JSON.parse(response.data.roadStatus)
                    );
                }
                queryParams.value.sn = info.value.sn;
            }
        }
    });
}
// 搜索按钮操作
function handleQuery() {
    getInfoBySn();
}
// 重置按钮操作
function resetQuery() {
    proxy.resetForm("queryForm");
}
// 查询电桩线路状态
function handleRoadState(sn) {
    let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在查询",
        background: "rgba(0, 0, 0, 0.7)",
    });
    getRoadState({ sn: sn })
        .then((response) => {
            loadingInstance.close();
            if (response.code == 0) {
                proxy.$modal.msgSuccess("查询成功");
                road_list.value = formatRoad(response.data);
            }
        })
        .catch((error) => {
            loadingInstance.close();
        });
}
// 格式化通道
function formatRoad(data) {
    let road_list = [];
    for (let i = 1; i < 11; i++) {
        let road_str;
        if (data[i] != null) {
            road_str = {
                road: i,
                state: data[i],
                data: null,
                pow: null,
            };
            road_list.push(road_str);
        } else {
            road_str = {
                road: i,
                state: 3,
                data: null,
                pow: null,
            };
            road_list.push(road_str);
        }
    }
    return road_list;
}
// 刷卡设置
function cardSet(row) {
    proxy.$refs["dialogCardRef"].open(row.devId, row.sn);
}
function handleDebug(sn) {
    let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在一键操作",
        background: "rgba(0, 0, 0, 0.7)",
    });
    debugOpen({
        sn: sn,
    })
        .then((response) => {
            loadingInstance.close();
            if (response.code == 0) {
                proxy.$modal.msgSuccess("操作成功");
                getInfoBySn();
            }
        })
        .catch((error) => {
            loadingInstance.close();
        });
}
// 设备指令--打开通道
function openRoad(sn, road) {
    let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在打开通道",
        background: "rgba(0, 0, 0, 0.7)",
    });
    roadOpen({ sn: sn, road: road })
        .then((response) => {
            loadingInstance.close();
            if (response.code == 0) {
                proxy.$modal.msgSuccess("打开成功");
                getInfoBySn();
            }
        })
        .catch((error) => {
            loadingInstance.close();
        });
}
// 设备指令--关闭通道
function closeRoad(sn, road) {
    let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在关闭通道",
        background: "rgba(0, 0, 0, 0.7)",
    });
    roadClose({ sn: sn, road: road })
        .then((response) => {
            loadingInstance.close();
            if (response.code == 0) {
                proxy.$modal.msgSuccess("关闭成功");
                getInfoBySn();
            }
        })
        .catch((error) => {
            loadingInstance.close();
        });
}
// 设备指令--查询温度
function handleRoadTemp(sn) {
    let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在查询温度",
        background: "rgba(0, 0, 0, 0.7)",
    });
    getTemp(sn)
        .then((response) => {
            loadingInstance.close();
            if (response.code == 0) {
                info.value.temperature = response.data;
                proxy.$modal.msgSuccess("查询成功");
            }
        })
        .catch((error) => {
            loadingInstance.close();
        });
}
// 设备指令--获取版本
function handleRoadVer(sn) {
    let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在获取版本",
        background: "rgba(0, 0, 0, 0.7)",
    });
    getVer({ sn: sn })
        .then((response) => {
            loadingInstance.close();
            if (response.code == 0) {
                version.value = response.data;
                proxy.$modal.msgSuccess("查询成功");
            }
        })
        .catch((error) => {
            loadingInstance.close();
        });
}
// 设备指令--重启设备
function handleRoadRestart(sn) {
    let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在重启",
        background: "rgba(0, 0, 0, 0.7)",
    });
    restart({ sn: sn })
        .then((response) => {
            loadingInstance.close();
            if (response.code == 0) {
                proxy.$modal.msgSuccess("重启成功");
            }
        })
        .catch((error) => {
            loadingInstance.close();
        });
}
// 设备指令--查询电桩功率
function handleRoadPow(sn, road) {
    let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在查询功率",
        background: "rgba(0, 0, 0, 0.7)",
    });
    getPow({ sn: sn, road: road })
        .then((response) => {
            loadingInstance.close();
            if (response.code == 0) {
                proxy.$modal.msgSuccess("查询成功");
                road_list.value[road - 1].pow = response.data.pow;
                road_list.value[road - 1].data = response.data.data;
            }
        })
        .catch((error) => {
            loadingInstance.close();
        });
}
function handleLeakElecNow(sn) {
    let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在查询实时漏电",
        background: "rgba(0, 0, 0, 0.7)",
    });
    getLeakElecNow(sn)
        .then((response) => {
            loadingInstance.close();
            if (response.code == 0) {
                proxy.$modal.msgSuccess("查询成功");
                leak_now.value = response.data
            }
        })
        .catch((error) => {
            loadingInstance.close();
        });
}
// 设备指令--校准标定
function handleStandardPower(sn) {
    let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在校准标定",
        background: "rgba(0, 0, 0, 0.7)",
    });
    standardPower(sn)
        .then((response) => {
            loadingInstance.close();
            if (response.code == 0) {
                proxy.$modal.msgSuccess("校准成功");
            }
        })
        .catch((error) => {
            loadingInstance.close();
        });
}
function handlePower(sn) {
    let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在查询功率",
        background: "rgba(0, 0, 0, 0.7)",
    });
    getPower(sn)
        .then((response) => {
            loadingInstance.close();
            if (response.code == 0) {
                let pow_list = response.data.split(",")
                proxy.$modal.msgSuccess("查询成功");
                for (let i = 0; i < road_list.value.length; i++) {
                    road_list.value[i].pow = pow_list[i]
                }
            }
        })
        .catch((error) => {
            loadingInstance.close();
        });
}
// 获取imei号
function handleImei(sn) {
    let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在获取imei",
        background: "rgba(0, 0, 0, 0.7)",
    });
    getImei(sn)
        .then((response) => {
            loadingInstance.close();
            if (response.code == 0) {
                proxy.$modal.msgSuccess("获取成功");
                imei.value = response.data
            }
        })
        .catch((error) => {
            loadingInstance.close();
        });
}

const id = route.query.id;
queryParams.value.devId = id;
if (queryParams.value.devId) {
    getDevInfo();
}
</script>

<style lang="scss" scoped>
.flex_cont {
    display: flex;
}

.info_cont {
    float: none;
    line-height: 36px;
    font-size: 14px;
    vertical-align: middle;
}

.btn_group {
    margin: 10px 0 0;
    padding: 10px 0 0;
    /* border-top: 1px solid #ccc; */
}

.btn_group+.btn_group {
    margin: 0;
    padding: 10px 0 0;
    /* border-top: 1px solid #ccc; */
}

.btn_group button {
    margin: 0 10px 5px 0;
}

.mt10 {
    margin-top: 10px;
}

.el-col-5:deep() {
    width: 20%;
    flex: 0 0 20%;
}

.road_state {
    display: inline-block;
    width: 80px;
    height: 80px;
}

.nolink {
    background-image: url("../../../assets/images/nolink.png");
    background-size: cover;
}

.online {
    background-image: url("../../../assets/images/online.png");
    background-size: cover;
}

.used {
    background-image: url("../../../assets/images/used.png");
    background-size: cover;
}

.error {
    background-image: url("../../../assets/images/error.png");
    background-size: cover;
}

.block {
    display: block;
}
</style>
